
<template>
  <div>

    
    <div class="message-list">
      <!-- 搜索 新建 -->
      <div class="serach-add-div">
        <el-button type="primary" round @click="showForm" v-if="currentRole === 'teacher'">发布讨论</el-button>
        <div style="display: flex; margin-top: 15px;">
          <ClassSelect  :is-multiple="false" v-model="gradeId" v-if="currentRole === 'teacher'"/>
          <el-input placeholder="请输入讨论标题" v-model="title" class="input-with-select">
            <el-button type="primary" slot="append" icon="el-icon-search" @click="handleSearch()"></el-button>
          </el-input>
        </div>
      </div>
      <!-- 讨论列表 -->
      <div v-for="item in data.records" :key="item.id" class="message-item" @click="toDetail(item.id)">
        <!-- 标题和发布人 -->
        <div class="message-content">
          <span class="title-span">{{ item.title }}</span>
          <span class="sender-span"> 发布人：{{ item.sender }}</span>
        </div>
        <!-- 删除和时间 -->
        <div class="del-time-div">
          <!-- 删除按钮 -->
          <el-link class="del-link" type="primary" :underline="false" v-if="currentRole === 'teacher'"
           @click.stop="handleDel(item.id)">删除</el-link>
          <!-- 时间 -->
          <div class="time-div">{{ item.createTime }}</div>
        </div>
      </div>
        <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination :current-page="data.current" :page-sizes="[10, 20, 30, 40]" :page-size="data.size"
          layout="total, sizes, prev, pager, next, jumper" :total="data.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 发布讨论对话框 -->
    <el-dialog title="发布讨论" :visible.sync="visible" width="30%">
      <el-row :gutter="20">
        <el-col>
          <el-form v-model="discussionForm" label-position="top">
            <el-form-item label="讨论标题:">
              <el-input
                v-model="discussionForm.title"
                 placeholder="请输入标题"
                autocomplete="off"
                style="width: 80%"
              />
            </el-form-item>
            <el-form-item label="讨论内容:">
              <el-input
              type="textarea"
              :rows="6"
              placeholder="请输入内容"
              clearable
              resize="none"
              v-model="discussionForm.content">
            </el-input>
            </el-form-item>
            <el-form-item label="班级:">
              <ClassSelect v-model="discussionForm.gradeId"  :is-multiple="false" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
  
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ClassSelect from '@/components/ClassSelect'
import {discussionpageOwner,discussionAdd,discussionDel,discussionpageStudent} from '@/api/discussion'
import {getRole} from '@/utils/auth'
export default {
  components: { ClassSelect },
  data() {
    return {
      data:{
        total:10
      },
      currentRole:null,
      pageNum: 1,
      pageSize: 10,
      title:null,
      gradeId:null,
      discussionForm:{
        title:null,
        content:null,
        gradeId:null
      },
      visible:false
    };
  },
  methods: {
   // 设置每页多少条逻辑
   handleSizeChange(val) {
      this.pageSize = val
      this.getDiscussionPage(this.pageNum, val,this.title,this.gradeId)
    },
    // 设置当前页逻辑
    handleCurrentChange(val) {
      this.pageNum = val
      this.getDiscussionPage(val, this.pageSize,this.title,this.gradeId)
    },
    //打开表单
    showForm(){
      this.visible = true
    },
    //按钮查询
    handleSearch(){
      this.getDiscussionPage(this.pageNum,this.pageSize,this.title,this.gradeId)
    },
    //提交表单
    handleConfirm(){
      discussionAdd(this.discussionForm).then(res=>{
        if(res.code){
          this.discussionForm.title = null
          this.discussionForm.content = null
          this.discussionForm.gradeId = null
          this.visible = false
          this.getDiscussionPage()
          this.$message({
              type: 'success',
              message: res.msg
            })
        }else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
      })
    },
    //弹出提示框
    handleDel(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.delDiscussion(id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //删除讨论
    delDiscussion(id){
      discussionDel(id).then(res=>{
        if(res.code){
          this.$message({
              type: 'success',
              message: res.msg
            })
            this.getDiscussionPage(this.pageNum, this.pageSize,this.title,this.gradeId)
        }else{
          this.$message({
              type: 'info',
              message: res.msg
            })
        }
      })
    },
    //教师分页获取
    async getDiscussionPage(pageNum, pageSize, title = null, gradeId = null) {
      const params = {
        pageNum: pageNum,
        pageSize: pageSize,
        title: title,
        gradeId: gradeId
      }
      
      //教师分页获取讨论
      if(this.currentRole === 'teacher'){
        const res = await discussionpageOwner(params)
        this.data = res.data
      }else if(this.currentRole === 'student'){
        //学生分页获取讨论
        delete params.gradeId
        const res = await discussionpageStudent(params)
        this.data = res.data
      }
      //学生获取讨论
    
    },
    toDetail(id){
      this.$router.push({name: 'discussion-detail',query:{discussionId: id}})
    }
  },
  created() {
    this.currentRole = getRole()
   this.getDiscussionPage()
  }
};
</script>

<style scoped>

.message-list {
  padding: 30px 60px 30px 30px;
  display: flex;
  flex-direction: column;
}

.message-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10px;
  border-bottom: 1px solid #ddd;
  margin: 10px 0;
}

.message-item:hover .del-link{
  display: block;
}

.message-item:hover .title-span{
  color: #409EFF;
}
.message-item:hover{
  background-color: #40a0ff0d;
  cursor: pointer;
}
.del-link{
  display: none;;
}



.title-span{
  font-size: 20px;
}
.sender-span{
  margin-top: 10px;
  font-size: 12px;
  color: #6b6a6a;
}
.message-content{
  display: flex;
  flex-direction: column;
}
.del-time-div{
  display: flex;
}
.time-div{
  margin-left: 150px;
  font-size: 12px;
  color: #6b6a6a;
}
.serach-add-div{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
